<template>
  <div class="analysis">
    <mt-header title="各科分析">
      <c-router-back slot="left"></c-router-back>
    </mt-header>
    <div class="subject-choose">
      <div class="tab-wrap">
        <div class="tab-nav bbi clearfix">
          <div class="nav-item on-active" :class="{active:tabActive === 'chinese'}" @click="changeTab('chinese')"><span class="trans">语文</span></div>
          <div class="nav-item on-active" :class="{active:tabActive === 'math'}" @click="changeTab('math')"><span class="trans">数学</span></div>
          <div class="nav-item on-active" :class="{active:tabActive === 'english'}" @click="changeTab('english')"><span class="trans">英语</span></div>
          <div class="nav-item on-active" :class="{active:tabActive === 'politics'}" @click="changeTab('politics')"><span class="trans">政治</span></div>
          <div class="nav-item on-active" :class="{active:tabActive === 'history'}" @click="changeTab('history')"><span class="trans">历史</span></div>
          <div class="nav-item on-active" :class="{active:tabActive === 'geography'}" @click="changeTab('geography')"><span class="trans">地理</span></div>
        </div>
      </div>
    </div>
    <!-- 得分率分析 -->
    <section class="mb10">
      <c-section-title title="得分率分析"></c-section-title>
      <div class="p15 bg-white mt-15 ">
        <score-analysis></score-analysis>
        <score-analysis></score-analysis>
        <score-analysis></score-analysis>
        <div class="section-desc">
          <div class="mb5 text-muted">
            分析总结：<span>小题正确率 <span class="emphasis">较低</span> ，说明基础知识不够扎实，对于小题的求解技巧没能归纳掌握，考场上遗憾对分。</span>
          </div>
        </div>
      </div>
    </section>
    <!-- 错题列表 -->
    <section class="mb10">
      <c-section-title title="错题列表"></c-section-title>
      <error-list></error-list>
      <c-more :to="{name:'volunteer'}"
              text="查看全部错题 >"></c-more>
    </section>
    <!-- 能力分析 -->
    <section class="mb10">
      <c-section-title title="能力分析"></c-section-title>
      <div class="ability-chart" ref="radarchart"></div>
      <div class="section-desc p15">
        <div class="mb5 text-muted">
          分析总结：<span>根据作答情况综合分析，能力处于 <span class="emphasis">一般水平</span>。</span>
        </div>
        <div class="mb5 text-muted">
          总结建议：<span>介于能力处于 <span class="emphasis">一般水平</span>，应多归纳总结，学会解题过程中学则最优解题思路和技巧，提升答题效率。</span>
        </div>
      </div>
    </section>
    <!-- 难易程度 -->
    <section class="degree">
      <c-section-title title="难易程度分布"></c-section-title>
      <div class="chart-wrap bg-white">
        <span class="get-score">得分</span><span class="lose-score">失分</span>
        <div class="ability-chart" ref="degreechart"></div>
      </div>
      <div class="section-desc p15">
        <div class="mb5 text-muted">
          分析总结：<span>本测试用卷整体难度 <span class="emphasis">适中</span> ，中等难度 试题失分最多，可能是因为审题不清或者考虑不周全落入出题人陷阱导致失分，例如题号为 <span class="emphasis">9、11、22</span>  三道试题，此类题型稍加练习可降低失分几率。</span>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import scoreAnalysis from '../components/score_analysis.vue'
  import errorList from '../components/error_list.vue'
  export default {
    data () {
      return {
        tabActive: 'chinese',
        radarChartOption: {
          radar: {
            radius: '60%',
            name: {
              color: '#5a626b'
            },
            indicator: [
              {name: '抽象概括能力', max: 6500},
              {name: '创新意识', max: 16000},
              {name: '应用意识', max: 30000},
              {name: '数据处理', max: 38000},
              {name: '想象空间', max: 52000},
              {name: '运算求解能力', max: 25000},
              {name: '推理论证能力', max: 25000}
            ]
            // axisLabel:{
            //   show:true,
            //   color:'red'
            // }
          },
          series: [{
            type: 'radar',
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000, 19000, 15000],
                name: '预算分配',
                areaStyle: {
                  opacity: 0.7,
                  color: '#cae9f6'
                },
                lineStyle: {
                  color: '#0bb0ef'
                },
                itemStyle: {
                  color: '#0bb0ef'
                }
              }
            ]
          }]
        },
        degreeChartOption: {
          backgroundColor: '#fff',
          xAxis: {
            type: 'category',
            data: ['易', '中', '难'],
            axisTick: {
              show: false
            }
          },
          yAxis: {
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          series: [{
            name: '得分',
            type: 'bar',
            stack: 'one',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: [{
              value: '30',
              itemStyle: {
                normal: {
                  color: '#0dd99c'
                }
              }
            }, {
              value: '80',
              itemStyle: {
                normal: {
                  color: '#00adef'
                }
              }
            }, {
              value: '40',
              itemStyle: {
                normal: {
                  color: '#ff505d'
                }
              }
            }]
          },
          {
            name: '失分',
            type: 'bar',
            stack: 'one',
            label: {
              normal: {
                show: true,
                position: 'bottom'
              }
            },
            data: [{
              value: '-70',
              itemStyle: {
                normal: {
                  color: '#c1f4e5',
                  opacity: 0.9
                }
              }
            }, {
              value: '-20',
              itemStyle: {
                normal: {
                  color: '#bfeafa',
                  opacity: 0.9
                }
              }
            }, {
              value: '-60',
              itemStyle: {
                normal: {
                  color: '#ffd2d5',
                  opacity: 0.9
                }
              }
            }]
          }]
        }
      }
    },
    components: {
      scoreAnalysis,
      errorList
    },
    watch: {
      deviceWidth () {
        this.myChart.resize()
      }
    },
    mounted () {
      this.bindchart()
      this.binddegreechart()
    },
    methods: {
      changeTab (tab) {
        this.tabActive = tab
      },
      bindchart () {
        this.myChart = this.$echarts.init(this.$refs.radarchart)
        this.myChart.setOption(this.radarChartOption)
      },
      binddegreechart () {
        this.myChart = this.$echarts.init(this.$refs.degreechart)
        this.myChart.setOption(this.degreeChartOption)
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import '../assets/less/_mixins-wln.less';
  .analysis{
    .emphasis{
      color: @primary
    }
    .text-muted{
      font-size: 13px;
      letter-spacing: 1px;
      line-height: 1.4;
    }
    .ability-chart{
      height: 250px;
      background-color: #Fff;
      position: relative;
    }
    .degree{
      .chart-wrap{
        position: relative;
      }
      .get-score,.lose-score{
        position: absolute;
        top:0;
        left:15px;
        font-size: 12px;
        color: @grey;
        z-index:999;
      }
      .get-score{
        top:100px;
      }
      .lose-score{
        top:150px;
      }
      .ability-chart{
        margin-left: 30px;
        width:clac(~'100% - 30px');
      }
    }
    .section-desc{
      background-color: #fff;
    }
  }
</style>
